<script setup>
 import { reactive,ref } from "vue";
 import productList from "../../../components/productList.vue";
 import { getAllProduct } from "../../../apis/user/product";
    // 搜索表单
  const searchForm = reactive({
    name: '',
    type: '',
    mark: ''
  })

  const product = ref([]);
  const total = ref(0);
  const pagation = ref({
    limit:12,
    page:1,
  })

  function initProduct(){
    const params = {
      ...pagation.value,
      ...searchForm,
      state:1
    }
    for (let keys in params) {
          if (params[keys] === null || params[keys] === undefined || params[keys] === '') delete params[keys]
    }
    getAllProduct(params).then(res=>{
      product.value = res.data.list;
      total.value = res.data.total;
    })
  }

  const resetSearch = () => {
      Object.keys(searchForm).forEach(key => {
        if (Array.isArray(searchForm[key])) {
          searchForm[key] = []
        } else {
          searchForm[key] = ''
        }
      })
      initProduct()
  }
  initProduct();
</script>


<template>
  <div>
    <!-- 搜索表单 -->
    <a-card>
      <a-form style="width: 100%;" layout="inline" :label-col="{ style: { width: '80px', textAlign: 'left' } }"
        :model="searchForm" @finish="initProduct">
        <div class="user-form">
          <a-row :gutter="[16, 16]" style="flex: 1;">
            <a-col class="gutter-row" :span="8">
              <a-form-item label="产品名称">
                <a-input v-model:value="searchForm.name" placeholder="请输入产品名称" allowClear />
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="8">
              <a-form-item label="外卖类型">
                <a-select v-model:value="searchForm.type" allowClear>
                  <a-select-option :value="1">主食</a-select-option>
                  <a-select-option :value="2">饮料</a-select-option>
                  <a-select-option :value="3">小吃</a-select-option>
                  <a-select-option :value="4">水果</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col class="gutter-row" :span="8">
              <a-form-item label="营销品类">
                <a-select v-model:value="searchForm.mark" allowClear>
                  <a-select-option :value="1">新品</a-select-option>
                  <a-select-option :value="2">招牌</a-select-option>
                  <a-select-option :value="3">推荐</a-select-option>
                  <a-select-option :value="4">普通</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <div class="form-btn">
            <a-form-item>
              <a-button type="link" @click="resetSearch">重置</a-button>
              <a-button type="primary" html-type="submit">搜索</a-button>
            </a-form-item>
          </div>
        </div>
      </a-form>
      <productList :list="product" :line ="3" style="height: 900px;"/>
      <div class="pagation">
        <a-pagination
          :total="total"
          :show-total="total => `总共 ${total} 条`"
          :page-size="pagation.limit"
          v-model:current="pagation.page"
          @change="initProduct"
        />
      </div>
    </a-card>
  </div>
</template>

<style lang="less" scoped>
  .user-form {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .form-btn {
      min-width: 140px;
    }
  }
  .pagation{
    display: flex;
    justify-content: flex-end;
  }
</style>